<template>
    <div class="Login">
        <div class="left_img hidden-sm-and-down">
            <span class="leftname">游爱说</span>
            <span>游爱说内容管理系统</span>
            <span class="introduce">
                更加轻量化，更快捷，多设备支持的轻量级内容管理系统
            </span>
        </div>
        <div class="right_login">
            <div class="title">
                <div class="welcome">欢迎使用内容管理系统</div>
                <div class="Account">
                    账号：
                    <el-input v-model="input" style=" width: 60%;height: 4vh;" placeholder="请输入账号" clearable />
                    <span v-if="getmyinput">请输入账号，长度为x-x位</span>
                </div>
                <div class="Password">
                    密码：
                    <el-input v-model="password" style="width: 60%;height: 4vh;" type="password" placeholder="请输入密码"
                        show-password />
                    <span v-if="getmypassword">请输入密码，长度为x-x位</span>
                </div>

                <div class="verify">
                    验证码：
                    <el-input v-model="verify" style="width: 40%;height: 4vh;" placeholder="请输入验证码"
                    clearable />
                    <canvas ref="canvas" @click="getverify"></canvas>
                    <span v-if="getmypassword2">请输入验证码(无视大、小写)</span>
                </div>

                <div class="agreement">
                    <el-checkbox v-model="checked" />
                    <span>已阅读并同意<a href="">《用户使用协议与条款》</a></span>
                    <span class="check_span" v-if="getmychecked">请勾选协议以登录</span>
                </div>
                <button class="login_btn" @click="mylogin">登录</button>
                <!-- <span @click="toregister" class="toregister">还没账号？去注册</span> -->
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
// import { el } from 'element-plus/es/locales.mjs';
import 'element-plus/theme-chalk/display.css'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
import api from '../api/index'
import { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';
import { signin, test } from '../api/request'
const router = useRouter()

const host = api.url;

// 表单
// 获取账号、密码
const input = ref('')
const password = ref('')
// 验证码
const verify = ref('')
// 是否勾选 （默认不勾选）
const checked = ref(false);

// 验证表单
const getmyinput = ref(false)
const getmypassword = ref(false)
const getmypassword2 = ref(false)
const getmychecked = ref(false)

// 画布渲染
const canvas = ref()
// 初始化
onMounted(() => {
    const ele = canvas.value;
    const img = new Image();
    img.src = `${host}/api/verify/captcha`;
    if (ele) {
        ele.width = 90;
        ele.height = 30;
        const pen = ele.getContext("2d");
        pen.fillStyle = "#f0f0f0";
        pen.strokeRect(0, 0, 100, 40);
        img.onload = () => {
            pen.drawImage(
                img,
                0,
                0,
                ele.width,
                ele.height,
            )
        }
    }
})

// 点击获取验证码
const getverify = () => {
    const ele = canvas.value;
    const img = new Image();
    // img.src = "http://localhost:4000/api/verify/captcha?" + Math.random();
    img.src = `${host}/api/verify/captcha?${Math.random()}`
    if (ele) {
        ele.width = 90;
        ele.height = 30;
        const pen = ele.getContext("2d");
        pen.fillStyle = "#f0f0f0";
        pen.strokeRect(0, 0, 100, 40);
        img.onload = () => {
            pen.drawImage(
                img,
                0,
                0,
                ele.width,
                ele.height,
            )
        }
    }
}
// 注册逻辑
// function toregister() {
//     router.push('/register')
// }

// 登录逻辑
const mylogin = async () => {
    // 是否完整的输入以及选中
    console.log(input.value, password.value, verify.value);

    // 验证验证码是否效验成功，各个条件是否满足
    let isvariy = false;

    if (!input.value) {
        getmyinput.value = true;
        ElMessage.error("请输入账号");
    }
    else {
        getmyinput.value = false;
    }
    if (!password.value) {
        getmypassword.value = true;
        ElMessage.error("请输入密码");
    }
    else {
        getmypassword.value = false;
    }
    if (!verify.value) {
        ElMessage.error("请输入验证码");
    }
    if (!checked.value) {
        getmychecked.value = true;
    }
    else {
        getmychecked.value = false;
    }


    // 验证是否通过
    if (input.value && password.value && verify.value) {

        // 初始化 myVerify 对象
        const myVerify = {
            "captcha": verify.value.toLowerCase()
        };

        // 输出 myVerify 对象
        // console.log(myVerify);
        await test(myVerify)
            .then(
                content => {
                    if (content.code == 200) {
                        // 执行登录逻辑
                        isvariy = true;
                        // 账号是否存在


                        // if (input.value != localStorage.getItem('username')) {
                        //     // alert("账号不存在！");
                        //     ElMessage.error("账号不存在！");
                        // }
                        // else {
                        //     // 验证成功
                        // }
                    }
                    else {
                        // 验证失败
                        ElMessage({
                            type: 'error',
                            message: content.msg
                        })
                        isvariy = false;
                    }
                }
            )
    };
    const mydata = {
        account: input.value, password: password.value, role: 1
    }
    console.log(mydata);
    if(isvariy){
        await signin(mydata)
        .then(
            content => {
                const { code, msg } = content;
                if (code == 200 ) {
                    const { nickName, token } = content;
                    
                    localStorage.setItem("USERNAME", nickName)
                    console.log("USERNAME", nickName);
                    localStorage.setItem("TOKEN", token)
                    // 登陆成功
                    ElMessage({
                        type: 'success',
                        message: content.msg
                    })

                    // 在本地设置已经登录
                    localStorage.setItem("ISLOGIN", "true")

                    // 延迟跳转首页
                    setTimeout(() => {
                        router.replace({ path: '/' })
                    }, 500)
                }
                else {
                    ElMessage({
                        type: 'error',
                        message: content.msg
                    })
                }
            }
        )
    }
}
</script>

<!-- 输入框 样式 -->
<style scoped>
.el-icon svg {
    height: 2rem;
    width: 2em;
}
canvas {
    background-color: white;
    display: inline-block;
    position: relative;
    top: 10px;
    margin-left: 0.5vw;
}
</style>
<style lang="scss">
@use "../common/scss/variable.scss";

.Login {
    display: flex;
    background-image: url("../common/images/mybg.png");
    background-size: cover;
    background-repeat: no-repeat;
    color: #ffffff;
    .left_img {
        flex-grow: 1;
        height: 100vh;

        // background-color: $bgcolor;
        span {
            display: block;
            width: 100%;
            text-align: center;
            margin: auto;
            font-size: 2vw;
            opacity: 1;
        }

        .leftname {
            font-size: 3vw;
            margin-top: 12rem;
            margin-bottom: 2vh;
        }

        .introduce {
            margin-top: 5vh;
            font-size: 1.5vw;
            font-family: "黑体";
        }
    }
    .right_login {
        background-color: rgba(255, 255, 255, 0.3);
        flex-grow: 2;
        height: 100vh;
        font-size: 1rem;

        .title {
            margin: 0 auto;
            width: 90%;
            height: 60vh;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 30px;
            top: 20%;
            position: relative;
            color: #000;
            text-align: center;

            .welcome {
                padding-top: 1rem;
                margin-bottom: 1rem;
                font-size: 1.3rem;
                position: relative;
                display: inline-block;
                text-align: center;
                font-size: 2vw;
            }

            .Account {
                margin-top: 2rem;

                span {
                    display: block;
                    color: rgb(255, 19, 19);
                }
            }

            .Password {
                margin: 1rem auto;

                span {
                    display: block;
                    color: rgb(255, 19, 19);
                }
            }

            .verify {
                span {
                    display: block;
                    color: rgb(255, 19, 19);
                }
            }

            .agreement {
                margin-left: 1vw;
                font-size: 1rem;

                .check_span {
                    color: red;
                    display: block;
                }
            }

            .login_btn {
                width: 70%;
                margin: 1rem auto;
                height: 6vh;
                border-radius: 10px;
                background-color: $bgcolor;
                font-size: 1.6vw;
            }

            .toregister {
                display: block;
            }
        }
    }
}
</style>